<template>
  <div class="setting-yly-container">
    <el-tabs v-model="activeTabName" @tab-click="activeTab" ref="tabs">
      <el-tab-pane label="拼团商品" name="1"><goods ref="goods" @jump_to_4="jump_to_4"/></el-tab-pane>
      <el-tab-pane label="订单管理" name="2"><order/></el-tab-pane>
      <el-tab-pane label="拼团管理" name="3"><manage/></el-tab-pane>
      <el-tab-pane v-if="is_show" label="拼团设置" name="4"><info :goods="goods" @jump_to_1="jump_to_1"/></el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import goods from './components/goods'
import order from './components/order'
import manage from './components/manage'
import info from './components/info'

export default {
  name: 'marketing-assemble',
  components: {
    goods,
    order,
    manage,
    info
  },
  data() {
    return {
      activeTabName: '1',
      goods: {},
      is_show: false
    }
  },  
  methods: {
    /**
     * 切换
     */
    activeTab() {
      // console.log(this.activeTabName)
    },
    /**
     * 跳转到
     */
    jump_to_4(e) {
      if (e.index === 4) {
        this.is_show = true;
      }
      this.goods = e.data;
      this.goods.assemble_id = e.id
      this.activeTabName = String(e.index);
    },
    /**
     * 跳转到
     */
    jump_to_1(e) {
      this.activeTabName = String(e.index);
      this.$refs.goods.getTuanGoodsList();
    },
  },
  mounted () {

  }
}
</script>

<style lang="scss" scoped>
.setting-yly-container{
  min-height: calc(100vh - 100px);
  margin: 20px;
  background-color: #fff;
  padding:25px;
  box-shadow: 0px 0px 4px 0px rgba(115, 115, 115, 0.2);
}
</style>